<template>
	<view style="detail-con">
		<navBar title="注浆监测详情" @goBack="uni.navigateBack()"></navBar>
		<u-gap height="20" bgColor="#F5F7FA"></u-gap>
		<view>
			<detailTextVue ref="detailTextVueRef" @changeTabIndex="changeTabIndex" :currIndex="currIndex" :slipCastingInfo="slipCastingInfo" :constructions="constructions"></detailTextVue>
			<groutingPressureVue ref="groutingPressureVue"></groutingPressureVue>
			<detailTableVue ref="detailTableVue"></detailTableVue>
			<groutingQuantityVue ref="groutingQuantityVue"></groutingQuantityVue>
			<differentialSettlementVue :slipCasting="levelObj" :titleValue="'水平收敛情况'" :yTitle="'收敛量/mm'"></differentialSettlementVue>
			<differentialSettlementVue :slipCasting="sedimentationObj"></differentialSettlementVue>
		</view>
	</view>
</template>

<script>
import detailTextVue from './components/detailText.vue';
import detailTableVue from './components/detailTable.vue';
import groutingPressureVue from './components/groutingPressure.vue';
import groutingQuantityVue from './components/groutingQuantity.vue';
import differentialSettlementVue from './components/differentialSettlement.vue';
import { obtainGroutingRecords } from '@/api/bigPage/microdisturbanceDataMonitoring.js'
import { handleFormatDate } from '@/utils/date.js'
export default {
	components: {
		detailTextVue,
		groutingPressureVue,
		detailTableVue,
		groutingQuantityVue,
		differentialSettlementVue
	},
	data() {
		return {
			slipCastingInfo: {},
			levelObj: {},
			sedimentationObj: {},
			constructions: {},
			currIndex: 0
		}
	},
	onLoad(options) {
		let params = {}
		if (options.mpId) {
			params.mpId = options.mpId
		}
		if (options.lineSiteSectionId) {
			params.lineSiteSectionId = options.lineSiteSectionId
		}
		if (options.lineSiteSectionType) {
			params.lineSiteSectionType = options.lineSiteSectionType
		}
		if (options.ringNumber) {
			params.ringNumber = options.ringNumber
		}
		if (options.constructionMethod) {
			params.constructionMethod = options.constructionMethod
		}
		if (options.projectName) {
			params.projectName = options.projectName
		}
		this.slipCastingInfo = {}
		this.getSlipCastingInfo(params)
	},
	methods: {
		getSlipCastingInfo(data) {
			const { mpId, lineSiteSectionId, lineSiteSectionType, ringNumber, constructionMethod, projectName } = data
			obtainGroutingRecords({
				mpId,
				lineSiteSectionId,
				lineSiteSectionType,
				ringNumber,
				projectId: uni.getStorageSync("isOwner")
			}).then(res => {
				if (res && res.result) {
					const nowDate = Date.now()
				    const colors = ['#30d4ac', '#ff396c', '#01dce9', '#1991ff', '#7a47ca', '#fea415', '#8295be']
					const { accumulatedSettlement, cumulativeCement, cumulativeLevel, cumulativeWaterGlass, list, realTimeMonitoringOfGroutingDto } = res.result
					let levelTotal = 0
					let sedimentationTotal = 0
					const slipCastingList = list.map(item => {
						const { time, cement, sodiumSilicate, sedimentation, level, groutingPressure, theAmountOfGrouting, settlementDetails, levelDetail, state, levelLast, sedimentationLast, startTime, endTime } = item
						levelTotal = parseInt((level || 0) * 100 + levelTotal * 100) / 100
						sedimentationTotal = parseInt((sedimentation || 0) * 100 + sedimentationTotal * 100) / 100
						// 注浆压力...
						const stressObj = { dateArray: [], dataArray: [], tableList: [] }
						let stressLabelArray = []
						if (Array.isArray(groutingPressure)) {
							let tempIndex = 0
							for (const index in groutingPressure) {
								const item1 = groutingPressure[index]
								if (tempIndex !== index && groutingPressure[tempIndex] && groutingPressure[tempIndex].dataList && item1.dataList && groutingPressure[tempIndex].dataList.length < item1.dataList.length) {
									tempIndex = index
								}
								stressObj.dataArray.push({ ...item1, color: '#366bf6' })
							}
							if (theAmountOfGrouting[tempIndex].dataList && theAmountOfGrouting[tempIndex].dataList.length) {
								stressObj.dateArray = theAmountOfGrouting[tempIndex].dataList.map(item2 => handleFormatDate(new Date(item2.time), 5))
							}
							// 处理表格样式的数据结构
							let tempDateArray = []
							for (let i = stressObj.dateArray.length - 1; i >= 0; i--) {
								tempDateArray.unshift(stressObj.dateArray[i])
								for (const index in stressObj.dataArray) {
									stressLabelArray.unshift(stressObj.dataArray[index].dataList[i].data)
								}
								// 五个为一组
								if (tempDateArray.length === 5 || i === 0) {
									stressObj.tableList.push({
										dateArray: tempDateArray,
										dataArray: [...stressLabelArray]
									})
									tempDateArray = []
									stressLabelArray = []
								}
							}
						}
						// 注浆量...
						const groutingQuantityObj = { dateArray: [], dataArray: [], tableList: [] }
						let groutingQuantityLabelArray = []
						if (Array.isArray(theAmountOfGrouting)) {
							const codeStrObj = { 'waterGlass': '水玻璃', 'cement': '水泥' }
							const tempColor = ['#2F66F6', '#CD0000']
							let tempIndex = 0
							for (const index in theAmountOfGrouting) {
								const item1 = theAmountOfGrouting[index]
								if (tempIndex !== index && theAmountOfGrouting[tempIndex] && theAmountOfGrouting[tempIndex].dataList && item1.dataList && theAmountOfGrouting[tempIndex].dataList.length < item1.dataList.length) {
									tempIndex = index
								}
								if (item1.ringNumber === 'waterGlass') {
									groutingQuantityObj.dataArray.unshift({ ...item1, label: `${codeStrObj[item1.ringNumber]}`, color: tempColor[index] })
									groutingQuantityLabelArray.unshift({ label: `${codeStrObj[item1.ringNumber]}`, dataList: [] })
								} else if (item1.ringNumber === 'cement') {
									groutingQuantityObj.dataArray.push({ ...item1, label: `${codeStrObj[item1.ringNumber]}`, color: tempColor[index] })
									groutingQuantityLabelArray.push({ label: `${codeStrObj[item1.ringNumber]}`, dataList: [] })
								}
							}
							if (theAmountOfGrouting[tempIndex].dataList && theAmountOfGrouting[tempIndex].dataList.length) {
								groutingQuantityObj.dateArray = theAmountOfGrouting[tempIndex].dataList.map(item2 => handleFormatDate(new Date(item2.time), 5))
							}
							// 处理表格样式的数据结构
							let tempDateArray = []
							for (let i = groutingQuantityObj.dateArray.length - 1; i >= 0; i--) {
								tempDateArray.unshift(groutingQuantityObj.dateArray[i])
								for (const index in groutingQuantityObj.dataArray) {
									groutingQuantityLabelArray[index].dataList.unshift(groutingQuantityObj.dataArray[index].dataList[i].data)
								}
								// 五个为一组
								if (tempDateArray.length === 5 || i === 0) {
									groutingQuantityObj.tableList.push({
										dateArray: tempDateArray,
										dataArray: [...groutingQuantityLabelArray]
									})
									tempDateArray = []
									groutingQuantityLabelArray = groutingQuantityLabelArray.map(item => ({ label: item.label, dataList: [] }))
								}
							}
						}
						// 沉降...
						const sedimentationObj = { dateArray: [], dataArray: [], tableList: [] }
						let sedimentationLabelArray = []
						if (Array.isArray(settlementDetails)) {
							let tempIndex = 0
							for (const index in settlementDetails) {
								const item1 = settlementDetails[index]
								if (tempIndex !== index && settlementDetails[tempIndex] && settlementDetails[tempIndex].dataList && item1.dataList && settlementDetails[tempIndex].dataList.length < item1.dataList.length) {
									tempIndex = index
								}
								sedimentationObj.dataArray.push({ ...item1, label: `${item1.ringNumber}环`, color: colors[index] })
								sedimentationLabelArray.push({ label: `${item1.ringNumber}环`, dataList: [] })
							}
							if (settlementDetails[tempIndex].dataList && settlementDetails[tempIndex].dataList.length) {
								sedimentationObj.dateArray = settlementDetails[tempIndex].dataList.map(item2 => handleFormatDate(new Date(item2.time), 5))
							}
							// 处理表格样式的数据结构
							let tempDateArray = []
							for (let i = sedimentationObj.dateArray.length - 1; i >= 0; i--) {
								tempDateArray.unshift(sedimentationObj.dateArray[i])
								for (const index in sedimentationObj.dataArray) {
									sedimentationLabelArray[index].dataList.unshift(sedimentationObj.dataArray[index].dataList[i] ? sedimentationObj.dataArray[index].dataList[i].data : '')
								}
								// 五个为一组
								if (tempDateArray.length === 5 || i === 0) {
									sedimentationObj.tableList.push({
										dateArray: tempDateArray,
										dataArray: [...sedimentationLabelArray]
									})
									tempDateArray = []
									sedimentationLabelArray = sedimentationLabelArray.map(item => ({ label: item.label, dataList: [] }))
								}
							}
						}
						// 水平...
						const levelObj = { dateArray: [], dataArray: [], tableList: [] }
						let levelLabelArray = []
						if (Array.isArray(levelDetail)) {
							let tempIndex = 0
							for (const index in levelDetail) {
								const item1 = levelDetail[index]
								if (tempIndex !== index && levelDetail[tempIndex] && levelDetail[tempIndex].dataList && item1.dataList && levelDetail[tempIndex].dataList.length < item1.dataList.length) {
									tempIndex = index
								}
								levelObj.dataArray.push({ ...item1, label: `${item1.ringNumber}环`, color: colors[index] })
								levelLabelArray.push({ label: `${item1.ringNumber}环`, dataList: [] })
							}
							if (levelDetail[tempIndex].dataList && levelDetail[tempIndex].dataList.length) {
								levelObj.dateArray = levelDetail[tempIndex].dataList.map(item2 => handleFormatDate(new Date(item2.time), 5))
							}
							// 处理表格样式的数据结构
							let tempDateArray = []
							for (let i = levelObj.dateArray.length - 1; i >= 0; i--) {
								tempDateArray.unshift(levelObj.dateArray[i])
								for (const index in levelObj.dataArray) {
									levelLabelArray[index].dataList.unshift(levelObj.dataArray[index].dataList[i] ? levelObj.dataArray[index].dataList[i].data : '')
								}
								// 五个为一组
								if (tempDateArray.length === 5 || i === 0) {
									levelObj.tableList.push({
										dateArray: tempDateArray,
										dataArray: [...levelLabelArray]
									})
									tempDateArray = []
									levelLabelArray = levelLabelArray.map(item => ({ label: item.label, dataList: [] }))
								}
							}
						}
						// 返回...
						return {
							time: handleFormatDate(new Date(time)),
							stressObj,
							groutingQuantityObj,
							sedimentationObj,
							levelObj,
							// isConstruction: state && !['acceptance_status_not_started'].includes(state),
							isConstruction: nowDate >= new Date(startTime).getTime() && nowDate < new Date(endTime).getTime(),
							constructions: {
								cement,
								sodiumSilicate,
								level,
								levelLast,
								sedimentation,
								sedimentationLast,
								levelTotal,
								sedimentationTotal,
								startTime: startTime ? handleFormatDate(new Date(startTime), 2) : '',
								endTime: endTime ? handleFormatDate(new Date(endTime), 2) : '',
							}
						}
					})
					for (let i = slipCastingList.length - 1, isUpdate = false; i >= 0; i--) {
						if (!isUpdate && slipCastingList[i].isConstruction) {
							isUpdate = true
						} else {
							slipCastingList[i].isConstruction = false
						}
					}
					this.slipCastingInfo = {
						ringNumber,
						constructionMethod,
						projectName,
						realTimeMonitoring: {
							...realTimeMonitoringOfGroutingDto,
							monitoringTime: handleFormatDate(new Date(realTimeMonitoringOfGroutingDto.monitoringTime), 3) || ''
						},
						constructionMonitoring: {},
						slipCastingList
					}
					// if (this.$refs.detailTextVueRef) {
						const index = this.slipCastingInfo.slipCastingList.findIndex(item => item.isConstruction)
						if (index !== -1) {
							this.$refs.detailTextVueRef.changeTab(index)
						} else {
							this.$refs.detailTextVueRef.changeTab(0)
						}
					// }
				}
			})
		},
		changeTabIndex(index) {
			if (!this.slipCastingInfo.slipCastingList[index]) {
				return
			}
			const { levelObj, sedimentationObj, stressObj, groutingQuantityObj } = this.slipCastingInfo.slipCastingList[index]
			this.levelObj = levelObj
			this.sedimentationObj = sedimentationObj
			if (this.$refs.detailTextVueRef) {
				this.currIndex = index
				this.constructions = this.slipCastingInfo.slipCastingList[index] ? this.slipCastingInfo.slipCastingList[index].constructions : {}
			}
			if (this.$refs.groutingPressureVue) {
				this.$refs.groutingPressureVue.getServerData(stressObj)
			}
			if (this.$refs.detailTableVue) {
				this.$refs.detailTableVue.init(stressObj.tableList)
			}
			if (this.$refs.groutingQuantityVue) {
				this.$refs.groutingQuantityVue.init(groutingQuantityObj)
			}
		}
	}
};
</script>

<style scoped lang="scss">

</style>
